<template>
  <div class="activeDetail">
    <div class="cus-title"><h4>打包活动详情</h4></div>
    <el-descriptions v-if="row" :column="3" border>
      <el-descriptions-item label="活动名称">{{ row.actName }}</el-descriptions-item>
      <el-descriptions-item label="开始时间">{{ row.startTime }}</el-descriptions-item>
      <el-descriptions-item label="结束时间">{{ row.endTime }}</el-descriptions-item>
      <el-descriptions-item v-if="activeTab == 'activeProfile'" label="上线时间">{{ row.onlineTime }}</el-descriptions-item>
      <el-descriptions-item v-if="activeTab == 'activeProfile'" label="活动状态">
        <el-tag v-if="row.state == 2" type="info" size="small">已结束</el-tag>
        <el-tag v-else-if="row.state == 1" type="info" size="small">下线</el-tag>
        <el-tag v-else-if="row.state == 0" type="success" size="small">上线</el-tag>
        <el-tag v-else type="info" size="small">未知</el-tag>
      </el-descriptions-item>
      <el-descriptions-item v-if="activeTab == 'activeCount'" label="累计销售金额">{{ row.saleTotalMoney.toFixed(2) }}</el-descriptions-item>
      <el-descriptions-item v-if="activeTab == 'activeCount'" label="累计租金金额">{{ row.leaseTotalMoney.toFixed(2) }}</el-descriptions-item>
      <el-descriptions-item label="累计参与购买人数">{{ row.buyUserCount }} 人</el-descriptions-item>
    </el-descriptions>
    <div style="padding: 30px 0;">
      <el-radio-group v-model="activeTab">
        <el-radio-button label="activeProfile">活动详情</el-radio-button>
        <el-radio-button label="activeCount">活动统计</el-radio-button>
      </el-radio-group>
    </div>
    <div v-if="row">
      <active-profile v-if="activeTab == 'activeProfile'" :id="row.id" />
      <active-count v-else-if="activeTab == 'activeCount'" :id="row.id" />
    </div>
  </div>
</template>

<script>
import activeProfile from './template/activeProfile.vue'
import activeCount from './template/activeCount.vue'
export default {
  name: 'ActiveDetail',
  components: { activeProfile, activeCount },
  data() {
    return {
      row: null,
      activeTab: 'activeProfile',
      isDeactivated: false
    }
  },
  created() {
    if (!this.isDeactivated) {
      this.row = this.$dd(this.$route.query.p)
      this.activeTab = 'activeProfile'
    }
  },
  activated() {
    if (this.isDeactivated) {
      this.isDeactivated = false
      const row = this.$dd(this.$route.query.p)
      if (this.row && this.row.id !== row.id) {
        this.row = null
        this.$nextTick(() => {
          this.activeTab = 'activeProfile'
          this.row = row
        })
      }
    }
  },
  deactivated() {
    this.isDeactivated = true
  },
  methods: {
  }
}
</script>

<style lang="scss" scoped>
.activeDetail {
  padding: 30px;
}
</style>
